<template>
	<view class="page_box  ">
		<u-navbar :is-back="true" title="积分中心" v-if="1" :border-bottom="false" title-color="#000"></u-navbar>

		<view class="content_box">
			<view class="flex justify-center">
				<view class="head-img w690 h240 bg-img bgimg flex flex-direction justify-center pl40 ">
					<text class="f28 text-white">积分</text>
					<text class="f60 text-bold text-white mt30">{{ data.score }}</text>
				</view>
			</view>
			<view class="padding-lr padding-tb-lg ">
				<view class="flex align-center">
					<text class="f28  flex" @click="click(1)" :class="c == 1 ? 'style' : ''">明细</text>
					<text class="f28 ml61 " @click="click(2)" :class="c == 2 ? 'style' : ''">规则</text>
				</view>
				<!-- <scroll-view scroll-y="true"> -->
				<z-paging
					use-page-scroll
					ref="paging"
					v-model="dataList"
					@query="queryList"
					:default-page-size="10"
					loading-more-no-more-text="我也是有底线的！"
					:show-refresher-update-time="true"
					:refresher-update-time-key="2"
					style="height: 65vh;"
					v-if="c == 1"
				>
					<custom-refresher slot="refresher" slot-scope="{ refresherStatus }" :status="refresherStatus"></custom-refresher>
					<block v-for="(item, index) in data.list" :key="index">
						<view class="info pt45 pb45 flex flex-direction solid-bottom">
							<view class="flex justify-between align-center">
								<text class="f28 text-black">{{ item.score_type }}</text>
								<text class="f32 text-bold text-black">{{ item.score }}</text>
							</view>
							<text class="mt45 f24 text-gray">{{ item.create_time }}</text>
						</view>
					</block>
				</z-paging>
				<!-- </scroll-view> -->
				<view class="">
					<block v-for="(item, index) in info" :key="index">
						<view class="flex mt45" v-if="c == 2">
							<i class="cuIcon-title text-black"></i>
							<view class="flex flex-direction ml20">
								<text class="f28  " style="font-weight: 500;">{{ item.score_name }}</text>
								<text class="f26  mt30">1. {{ item.rule }}</text>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			field: {
				backgroundColor: '#000',
			},
			c: 1,
			page: 1,
			page_szie: 10,
			data: {},
			info: [],
			dataList: [],
		};
	},
	onShow() {},
	onLoad(e) {
		// this.pointsDetails()
		this.pointsRules();
	},
	methods: {
		async click(e) {
			this.c = e;
		},

		async queryList(pageNo, pageSize) {
			let obj = {
				page: pageNo,
				page_size: pageSize,
			};
			const res = await this.$u.post('/Finance/scoreList', obj, {});
			if (res.code) {
				console.log('res: ', res.data.list);
				this.data = res.data;
				this.$refs.paging.complete(res.data.list);
			}
		},
		// async pointsDetails(){
		//      let obj = {
		//          page: this.page,
		//          page_szie: this.page_szie,
		//      };
		//      const res = await this.$u.post('/Finance/scoreList', obj, );
		//      if (res.code) {
		//          this.data = res.data;
		//      }
		// },
		async pointsRules() {
			const res = await this.$u.get('/Finance/scoreRule', {});
			if (res.code) {
				this.info = res.data;
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.page_box {
	.content_box {
		.bgimg {
			background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210623151452.png);
		}
		.style {
			position: relative;
			font-size: 32rpx;
			font-weight: 600;
			z-index: 1;
		}
		.style::after {
			position: absolute;
			bottom: -5rpx;
			left: 0;
			content: '';
			width: 68rpx;
			height: 12rpx;

			background-color: rgba(251, 185, 181, 0.5);
			border-radius: 6rpx;
			z-index: -1;
		}
	}
}
</style>
